<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<h1>{{msg}}</h1>
			<h1 :class="className">类名绑定</h1>
		</div>
		<script type="text/javascript">
			let app = new Vue({
				el:'#app',
				data:{
					msg:"helloVue",
					className:"redBg"
				},
				beforeCreate() {
					console.log('beforeCreate')
					// 此时数据data和事件方法methods还未绑定到app对象上
				},
				
				created() {
					console.log('created')
					// 数据data和方法methods绑定到应用对象app上
					console.log(this)
					console.log(this.msg)
					console.log(this.clickEvent)
				},
				beforeMount(){
					//渲染之前,根据数据生成的DOM对象是获取不到的
					console.log('beforeMount')
					let dom = document.querySelector(".redBg")
					console.log(dom)
				},
				mounted(){
					console.log('mounted')
					//渲染之后,可以获取数据生成的DOM对象
					let dom = document.querySelector(".redBg")
					console.log(dom)
				},
				methods:{
					clickEvent:function(){
						
					}
				},
				beforeUpdate() {
					//数据更改,但内容未更改之前
					console.log('beforeUpdate')
				},
				updated() {
					//内容已更新完毕
					console.log('update')
				},
				beforeDestroy() {
					//应用销毁之前
					console.log("beforeDestory")
				},
				destroyed(){
					//应用销毁之后
					console.log("Destory")
				}
				
			})
			
			
			
		</script>
	</body>
</html>
